<template>
  <div class="volume" :class="{'no-volume': data.length == 0}">
        <div class="volume_title">领券<i @click="volumecloseFn"></i></div>
         <div v-for="(item, index) in data" class="volume-box"  :key="item.id">
            <img src="/static/images/volume-l.png" alt="" class="volume-i-left">
            <div>
                <div class="clear">
                    <div class="volume-box-left volume-box-info">
                        <h2>{{item.activityDesc}}</h2>
                        <p class="volume-box-time">
                          {{item.couponStartTime?item.couponStartTime.split(' ')[0].replace(/-/g,'.'): ''}}&nbsp;-&nbsp;{{item.couponEndTime?item.couponEndTime.split(' ')[0].replace(/-/g,'.'): ''}}
                        </p>
                    </div>
                    <div class="volume-box-right volume-box-price">
                         <i>&yen;</i>
                         <span>{{item.couponValue | formatPrice}}</span>
                    </div>
                </div>
                <div class="line"></div>
                <div class="volume-box-left">
                    <span class="volume-box-indu">{{item.activitySecretKey}}</span>
                </div>
                <div class="volume-box-right volume-box-out" v-if="item.isWillExpire == '1'">
                    <span>即将过期</span>
                </div>
            </div>
         
            <div class="volume-r-bg">
            </div>
         
         </div>

  </div>
</template>
<script>
  export default {
    props:['data'],
    data(){
      return{

      }
    },
    methods:{
      volumecloseFn(){
        this.$emit('volumecloseFn')
      }
    } 
  }
</script>

<style lang="scss" scoped>
    @function _($px) {
        $rem: $px/50;
        @return #{$rem}rem;
   }
  .volume_title {
    position: relative;
    height: _(52);
    line-height: _(80);
    position: relative;
    font-size: _(28);
    color: #444;
    letter-spacing: 0;
    text-align: center;
    i {
        position: absolute;
        right: _(28);
        top: _(28);
        width: _(25);
        height: _(25);
        background-size: 100% 100%;
        background-image: url('/static/images/store/volumeclose.png')
    }
  }
  .volume {
    text-align: center;
    padding-bottom: 1rem;
  } 
  .volume-box {
      position: relative;
      width: _(606);
      height: _(178);
      background-color: #fff;
      display: inline-block;
      margin:_(28) 0 0 _(-80);

      img {
        height: 100%;
        width: auto !important;
      }

      .volume-i-left {
          position: absolute;
          top: 0;
          left: _(-5);
      }

      
      .volume-box-info {
        margin-left: _(35);
        text-align: left;
              h2 {
                max-width: 6.6rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: pre;
                font-size: _(30);
                color:#333333;
                height: _(42);
                line-height: _(42);
              }
              .volume-box-mj {
                font-size: _(22);
                color:#ffc001;
              }

              .volume-box-time {
                font-size: _(22);
                color:#bbbbbb;
              }
      }
      .volume-box-price {
          margin-top: _(7);
          margin-right: _(25);
          height: _(88);  
          line-height: _(88);
          color: #FFC001;
          i {
              font-size: _(40);
              letter-spacing: _(-0.25);
              text-align:left;
          }
          span {
            font-size: _(60);
            letter-spacing: _(-0.43);
            text-align: left;

          }
      }


      .volume-box-indu {
          display: inline-block;
          margin-left: _(35);
          height: _(30); 
          line-height: _(30); 
          margin-top: _(21);
          font-size: _(22);
          color:#444444;
          letter-spacing: _(-0.14);
          text-align:left;
      }
      .volume-box-out {
        width: _(102);
        height: _(32);
        line-height: _(32);
        margin-top: _(18);
        margin-right: _(31);
        color: #ffc001;
        border:1px solid #ffc001;;
        font-size: _(18);
        border-radius: _(2);
     }

     .volume-r-bg {
        position: absolute;
        width: _(82);
        top: 0;
        right: _(-80);
        height: _(178);
        background-image: url('/static/images/store/lqvolume.png');
        background-size: 100% 100%;
     }
  }
  .volume-box-left {
    float: left;
  }
  .volume-box-right {
    float: right;
  }
  .clear {
    overflow: hidden;
    padding-top: _(22);
  }
  .line {
    width: _(580);
    height: 1px;
    background-color: #eeeeee;
  }
 
 
 
 
.no-volume {
  height: 100%;
  position: relative;
  text-align: center;
  padding-bottom: 0;
    .no-volume-box {
      position: absolute;
      left: 0;
      top: 50%;
      width: 100%;
      text-align: center;
      height: _(160);
      margin-top: _(-100);
      img {
        width: _(185);
        display: inline-block;
      }
      p {
        font-size: _(26);
        margin-top: _(40);
        color: #999;;
        letter-spacing: _(-0.16);
      }
    }
}
</style>
